<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>沂水旅游-发布友圈</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css">
    <link rel="stylesheet" href="/static/index/css/base.css">
    <link rel="stylesheet" href="/static/index/css/baseDetail.css">
    <link rel="stylesheet" href="/static/index/css/gonglveWrite.css">
</head>
<body>

{include file="public/header" model='circle' /}

<div class="searchBox layui-hide-xs">
    <div class="layui-container mbx-top-nav">
        <div class="mianbaoxie-nav">
            <span class="layui-breadcrumb">
              <a href="/">首页</a>
              <a href="{:url('Circle/circleList')}">友圈列表</a>
              <a><cite>发布友圈</cite></a>
            </span>
        </div>

        <div class="weather">
            <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=5&py=linyi2" width="200" height="26"
                    frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
        </div>

    </div>
</div>

<form class="layui-form" id="theForm" method="post" action="{:url('Circle/addCircle')}">
    <div class="methodTitleBox">
        <div class="titleBox">
            <input type="text" name="title" id="gonglvTitle" placeholder="请输入友圈标题">
        </div>
    </div>


    <div class="writeBox">

        <div class="writeBox-container">

            <div class="oneWrite">

                <div class="writeText">
                    <textarea placeholder="此处编辑友圈内容..." class="write-textarea" name="data[]"></textarea>
                    <input class="the-image" name="image[]" type="hidden">
                </div>

                <div class="showImage"></div>

                <div class="writeImg">
                    <button type="button" class="layui-btn layui-btn-primary upload-image" id="upload_image_0">上传图片</button>
                </div>

            </div>

        </div>


        <div class="addModal">
            <button type="button" id="addModdal" class="layui-btn">添加模块</button>
        </div>

        <div class="xiangguan">
            <p style="line-height: 28px;padding-top: 6px;">选择分类：</p>
            <div class="xiangguan-op">

                {foreach $fc_tag as $k => $v}
                <input type="radio" name="fc_id" value="{$v.id}" title="{$v.data_name}" {eq name="k" value="0"}checked{/eq}>
                {/foreach}
            </div>
        </div>

    </div>

    <div class="toSubmit">

        <div class="xieyi">
            <div class="layui-form layui-form-submit">
                <input type="checkbox" name="is_read" value="1" title="已阅读并同意" lay-skin="primary" checked>
                <a href="javascript:;">沂水旅游网友圈协议</a>
            </div>
        </div>

        <div class="addButton">
            <button class="layui-btn layui-btn-addButton" type="button" id="toSubmit">确认发布</button>
        </div>

    </div>

</form>


{include file="public/footer" /}

<script>
    var upload = layui.upload,
        layer = layui.layer,
        form = layui.form,
        element = layui.element;

        form.render();
        element.init();

    var upid = 1;

    $('#addModdal').on('click',function(){

        var str = '<div class="oneWrite">' +
            '<div class="writeText">' +
            '<textarea placeholder="此处编辑攻略内容..." class="write-textarea" name="data[]"></textarea>' +
            '<input class="the-image" name="image[]" type="hidden">'+
            '</div>'+
            '<div class="showImage"></div>'+
            '<div class="writeImg">'+
            '<button type="button" lay-data class="layui-btn layui-btn-primary upload-image" id="upload_image_' + upid +'" >上传图片</button>'+
            '<button type="button" class="layui-btn layui-btn-primary del-modal" id="del_modal_'+ upid +'" style="margin-left: 10px;">删除模块</button>'+
            '</div>'+
            '</div>';

        $('.writeBox-container').append(str);

        var b_id = "#upload_image_" + upid;
        //普通图片上传
        var uploadInst = upload.render({
            elem: b_id
            ,url: "{:url('Circle/uploadCircleImg')}"
            ,before:function(){
                var loading = layer.load(1, {
                    shade: [0.1,'#fff'] //0.1透明度的白色背景
                });
            }
            ,progress: function(n){
                var percent = n + '%'; //获取进度百分比
                element.progress('demo', percent); //可配合 layui 进度条元素使用
            }
            ,done: function(res){
                layer.closeAll();
                if (res.code == 1){
                    var item = this.item;
                    layer.msg('上传成功',{time:1000},function(){
                        var imgStr = "<img src='"+ res.path +"'>";
                        item.parent().parent().children('.showImage').html(imgStr);
                        item.parent().parent().children('.writeText').children('.the-image').val(res.path);
                    });

                }else{
                    return layer.msg(res.msg);
                }
            }
        });

        var del_id = "#del_modal_" + upid;

        $(del_id).bind('click',function(){

            var delDom = $(this).parent().parent();

            layer.confirm('确认删除该模块吗？',function(){
                delDom.remove();
                layer.closeAll();
            });

        });

        upid++;
    });

    //普通图片上传
    var uploadInst = upload.render({
        elem: '#upload_image_0'
        ,url: "{:url('Circle/uploadCircleImg')}"
        ,before:function(){
            var loading = layer.load(1, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });
        }
        ,progress: function(n){
            var percent = n + '%'; //获取进度百分比
            element.progress('demo', percent); //可配合 layui 进度条元素使用
        }
        ,done: function(res){
            layer.closeAll();
            if (res.code == 1){
                var item = this.item;
                layer.msg('上传成功',{time:1000},function(){
                    var imgStr = "<img src='"+ res.path +"'>";
                    item.parent().parent().children('.showImage').html(imgStr);
                    item.parent().parent().children('.writeText').children('.the-image').val(res.path);
                });

            }else{
                return layer.msg(res.msg);
            }
        }
    });


    $('#toSubmit').click(function(){

        var title = $('#gonglvTitle').val();

        if (title == ''){
            layer.msg('请输入友圈标题',{icon:2,time:1500});
            return false;
        }


        if($('[name="is_read"]:checked').length==0){

            layer.msg('请阅读同意沂水旅游网友圈协议',{icon:2,time:1500});
            return false;
        };

        $('#theForm').submit();

    });

</script>
</body>
</html>